<template>
  <div
    class="site-wrapper"
    :class="{ 'site-sidebar--fold': sidebar.sidebarFold }"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中"
  >
    <nav
      class="site-navbar"
      :class="{ 'site-sidebar--fold': sidebar.sidebarFold }"
    >
      <div class="site-navbar__header">
        <h1 class="site-navbar__brand">
          <a href="" class="site-navbar__brand-lg">神州大健康体检系统</a>
          <a href="" class="site-navbar__brand-mini">体检</a>
        </h1>
      </div>
      <div
        class="navbar-container"
        :class="{ 'navbar-container--fold': sidebar.sidebarFold }"
      >
        <div class="switch" @click="handleSwitch()">
          <SvgIcon class="icon-svg" name="zhedie" />
        </div>
        <div class="right-container">
          <el-dropdown>
            <span class="el-dropdown-link">
              <span class="avatar-container" style="cursor: pointer">
                <el-avatar shape="circle" :size="25" :src="user.photo">
                  <el-icon><UserFilled /></el-icon>
                </el-avatar>
              </span>
              {{ user.name }}
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="updatePassword()">
                  修改密码
                </el-dropdown-item>
                <el-dropdown-item @click="logout()"> 退出 </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </nav>
    <aside class="site-sidebar site-sidebar--dark">
      <div class="site-sidebar__inner">
        <el-menu
          :default-active="siteContent.menuActiveName || 'Home'"
          :collapse="sidebar.sidebarFold"
          :collapse-transition="false"
          class="site-sidebar__menu"
          background-color="#263238"
          active-text-color="#fff"
          text-color="#8a979e"
        >
          <el-menu-item index="Home" @click="$router.push({ name: 'MisHome' })">
            <SvgIcon class="icon-svg" name="home"></SvgIcon>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-sub-menu
            index="组织管理"
            :popper-class="
              'site-sidebar--' + sidebar.sidebarLayoutSkin + '-popper'
            "
          >
            <template #title>
              <el-icon>
                <SvgIcon name="users_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">组织管理</span>
            </template>
            <el-menu-item
              index="MisDept"
              v-if="proxy.isAuth(['ROOT', 'DEPT:SELECT'])"
              @click="$router.push({ name: 'MisDept' })"
            >
              <el-icon>
                <SvgIcon name="company_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">部门管理</span>
            </el-menu-item>
            <el-menu-item
              index="MisRole"
              v-if="proxy.isAuth(['ROOT', 'ROLE:SELECT'])"
              @click="$router.push({ name: 'MisRole' })"
            >
              <el-icon>
                <SvgIcon name="role_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">角色管理</span>
            </el-menu-item>
            <el-menu-item
                index="MisPermission"
                v-if="proxy.isAuth(['ROOT'])"
                @click="$router.push({ name: 'MisPermission' })"
            >
              <el-icon>
                <SvgIcon name="role_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">权限管理</span>
            </el-menu-item>
            <el-menu-item
              index="MisUser"
              v-if="proxy.isAuth(['ROOT', 'USER:SELECT'])"
              @click="$router.push({ name: 'MisUser' })"
            >
              <el-icon>
                <SvgIcon name="user_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">用户管理</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu
            index="业务管理"
            :popper-class="
              'site-sidebar--' + sidebar.sidebarLayoutSkin + '-popper'
            "
          >
            <template #title>
              <el-icon>
                <SvgIcon name="trust_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">业务管理</span>
            </template>
            <el-menu-item
              index="MisGoods"
              v-if="proxy.isAuth(['ROOT', 'GOODS:SELECT'])"
              @click="$router.push({ name: 'MisGoods' })"
            >
              <el-icon>
                <SvgIcon name="goods_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">体检套餐</span>
            </el-menu-item>
            <el-menu-item
              index="MisRule"
              v-if="proxy.isAuth(['ROOT', 'RULE:SELECT'])"
              @click="$router.push({ name: 'MisRule' })"
            >
              <el-icon>
                <SvgIcon name="rule_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">促销规则</span>
            </el-menu-item>
            <el-menu-item
              index="MisCustomer"
              v-if="proxy.isAuth(['ROOT', 'CUSTOMER:SELECT'])"
              @click="$router.push({ name: 'MisCustomer' })"
            >
              <el-icon>
                <SvgIcon name="customer_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">客户档案</span>
            </el-menu-item>
            <el-menu-item
              index="MisOrder"
              v-if="proxy.isAuth(['ROOT', 'ORDER:SELECT'])"
              @click="$router.push({ name: 'MisOrder' })"
            >
              <el-icon>
                <SvgIcon name="order_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">订单管理</span>
            </el-menu-item>
            <el-menu-item
              index="MisCustomerIm"
              v-if="proxy.isAuth(['ROOT', 'CUSTOMER_IM:SELECT'])"
              @click="$router.push({ name: 'MisCustomerIm' })"
            >
              <el-icon>
                <SvgIcon name="im_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">客服IM</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu
            index="体检管理"
            :popper-class="
              'site-sidebar--' + sidebar.sidebarLayoutSkin + '-popper'
            "
          >
            <template #title>
              <el-icon>
                <SvgIcon name="night_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">体检管理</span>
            </template>
            <el-menu-item
              index="MisAppointment"
              v-if="proxy.isAuth(['ROOT', 'APPOINTMENT:SELECT'])"
              @click="$router.push({ name: 'MisAppointment' })"
            >
              <el-icon>
                <SvgIcon name="appointment_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">体检预约</span>
            </el-menu-item>
            <el-menu-item
              index="MisCustomerCheckin"
              v-if="proxy.isAuth(['ROOT', 'CUSTOMER_CHICKIN:SELECT'])"
              @click="$router.push({ name: 'MisCustomerCheckin' })"
            >
              <el-icon>
                <SvgIcon name="checkin_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">体检签到</span>
            </el-menu-item>
            <el-menu-item
              index="MisAppointmentRestriction"
              v-if="proxy.isAuth(['ROOT', 'APPOINTMENT_RESTRICTION:SELECT'])"
              @click="$router.push({ name: 'MisAppointmentRestriction' })"
            >
              <el-icon>
                <SvgIcon name="setting_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">预约设置</span>
            </el-menu-item>
            <el-menu-item
              index="MisCheckup"
              v-if="proxy.isAuth(['ROOT', 'CHECKUP:SELECT'])"
              @click="$router.push({ name: 'MisCheckup' })"
            >
              <el-icon>
                <SvgIcon name="doctor_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">医生检查</span>
            </el-menu-item>
            <el-menu-item
              index="MisCheckupReport"
              v-if="proxy.isAuth(['ROOT', 'CHECKUP_REPORT:SELECT'])"
              @click="$router.push({ name: 'MisCheckupReport' })"
            >
              <el-icon>
                <SvgIcon name="file_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">体检报告</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu
            index="系统设置"
            :popper-class="
              'site-sidebar--' + sidebar.sidebarLayoutSkin + '-popper'
            "
            v-if="proxy.isAuth(['ROOT', 'SYSTEM:SELECT'])"
          >
            <template #title>
              <el-icon>
                <SvgIcon name="system_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">系统设置</span>
            </template>
            <el-menu-item
              index="MisFlowRegulation"
              @click="$router.push({ name: 'MisFlowRegulation' })"
            >
              <el-icon>
                <SvgIcon name="people_fill" class="icon-svg" />
              </el-icon>
              <span slot="title">人员限流</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
    </aside>
    <div class="site-content__wrapper">
      <main
        class="site-content"
        :class="{ 'site-content--tabs': $route.meta.isTab }"
      >
        <el-tabs
          v-if="$route.meta.isTab"
          v-model="siteContent.mainTabsActiveName"
          :closable="true"
          style="margin-left: 5px"
          @tab-click="selectedTabHandle"
          @tab-remove="removeTabHandle"
        >
          <el-tab-pane
            v-for="item in siteContent.mainTabs"
            :label="item.title"
            :name="item.name"
          >
            <el-card :body-style="siteContent.siteContentViewHeight">
              <router-view :key="router.currentRoute.value.query.random" />
            </el-card>
          </el-tab-pane>
        </el-tabs>
        <el-card v-else :body-style="siteContent.siteContentViewHeight">
          <router-view :key="router.currentRoute.value.query.random" />
        </el-card>
      </main>
    </div>
  </div>
  <el-dialog title="提示" v-model="dialog.visible" width="25%">
    <el-form
      :model="dialog.dataForm"
      :rules="dialog.dataRule"
      ref="dialogForm"
      label-width="80px"
    >
      <el-form-item label="原密码" prop="password">
        <el-input
          type="password"
          v-model="dialog.dataForm.password"
          size="medium"
          maxlength="20"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input
          type="password"
          v-model="dialog.dataForm.newPassword"
          size="medium"
          maxlength="20"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input
          type="password"
          v-model="dialog.dataForm.confirmPassword"
          size="medium"
          maxlength="20"
          clearable
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="medium" @click="dialog.visible = false"
          >取消</el-button
        >
        <el-button size="medium" type="primary" @click="dataFormSubmit()"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import SvgIcon from "../../components/SvgIcon.vue";
import { isURL } from "../../utils/validate";
import {
  ref,
  reactive,
  provide,
  getCurrentInstance,
  onMounted,
  watch,
} from "vue";

import { useRoute, useRouter } from "vue-router";
import { Component, Vue, Watch } from "vue-property-decorator";
import { fa } from "element-plus/es/locale";
import { ElLoading } from "element-plus";
import { error } from "jquery";

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();

let loading = false;

// 左边栏const
const sidebar = reactive({
  sidebarFold: false,
  sidebarLayoutSkin: "dark",
});

// 内容区const
const siteContent = reactive({
  documentClientHeight: 0,
  siteContentViewHeight: 0,
  height: null,
  mainTabs: [], // 数组里面每个元素就是一个Tab
  mainTabsActiveName: "", // 记录当前选中的Tab标签
  menuActiveName: "", // 记录当前选中的菜单项
});

// 用户信息const
const user = reactive({
  name: "",
  photo: "",
  updatePasswordVisible: false,
});

const validateConfirmPassword = function (rule, value, callback) {
  if (value != dialog.dataForm.newPassword) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};

const dialog = reactive({
  visible: false,
  dataForm: {
    password: "",
    newPassword: "",
    confirmPassword: "",
  },
  dataRule: {
    password: [
      {
        required: true,
        pattern: "^[a-zA-Z0-9]{6,20}$",
        message: "密码格式有误",
      },
    ],
    newPassword: [
      {
        required: true,
        pattern: "^[a-zA-Z0-9]{6,20}$",
        message: "密码格式有误",
      },
    ],
    confirmPassword: [
      {
        required: true,
        pattern: "^[a-zA-Z0-9]{6,20}$",
        message: "密码格式有误",
      },
      {
        validator: validateConfirmPassword,
        trigger: "blur",
      },
    ],
  },
});

function routeHandle(route) {
  resetDocumentClientHeight();
  loadSiteContentViewHeight();
  if (route.meta.isTab) {
    /* 创建Tab控件之前，先判断mainTabs[]数组中是否存在该Vue页面的Tab控件。
     * 比如我们要访问角色管理页面，程序先要判断是否存在角色管理页面的Tab控件。
     * 如果不存在就创建Tab控件；如果存在就不创建新的Tab控件，直接切换到现有的Tab控件
     */
    let tab = siteContent.mainTabs.filter(
      (item) => item.name === route.name
    )[0];
    if (tab == null) {
      tab = {
        title: route.meta.title,
        name: route.name,
      };
      siteContent.mainTabs.push(tab);
    }
    //选中某个Tab控件
    siteContent.mainTabsActiveName = tab.name;
    //选中某个菜单项
    siteContent.menuActiveName = tab.name;
  } else {
    siteContent.mainTabs = [];
    siteContent.mainTabsActiveName = "";
    siteContent.menuActiveName = "Home";
  }
}

routeHandle(route);

watch(
  () => router,
  () => {
    routeHandle(route);
  },
  {
    immediate: true,
    deep: true,
  }
);

function resetDocumentClientHeight() {
  siteContent.documentClientHeight = document.documentElement.clientHeight;
}

function loadSiteContentViewHeight() {
  let height = siteContent.documentClientHeight - 50 - 70 - 2;
  if (route.meta.isTab) {
    height = height - 40;
  }
  siteContent.height = height;
  siteContent.siteContentViewHeight = { minHeight: height + "px" };
}

function selectedTabHandle(tab) {
  router.push({
    name: tab.paneName,
  });
}

function removeTabHandle(tabName) {
  // 过滤出不应该被删除的标签
  siteContent.mainTabs = siteContent.mainTabs.filter(
    (item) => item.name !== tabName
  );
  if (siteContent.mainTabs.length >= 1) {
    let tab = siteContent.mainTabs[siteContent.mainTabs.length - 1];
    siteContent.mainTabsActiveName = tab.name;
    router.push({
      name: tab.name,
    });
  } else {
    siteContent.mainTabsActiveName = "";
    router.push({
      name: "MisHome",
    });
  }
}

function handleSwitch() {
  sidebar.sidebarFold = !sidebar.sidebarFold;
}

function updatePassword() {
  dialog.visible = true;
  // 清空上一次的验证结果
  proxy.$nextTick(function () {
    proxy.$refs["dialogForm"].resetFields();
  });
}

function dataFormSubmit() {
  proxy.$refs["dialogForm"].validate((valid) => {
    if (valid) {
      let json = {
        password: dialog.dataForm.password,
        newPassword: dialog.dataForm.newPassword,
      };
      proxy.$http(
        "/mis/user/updatePassword",
        "POST",
        json,
        true,
        function (resp) {
          if (resp.rows == 1) {
            proxy.$message({
              message: "密码修改成功",
              type: "success",
              duration: 1200,
              onClose: () => {
                dialog.visible = false;
              },
            });
          } else {
            proxy.$message({
              message: '密码修改失败',
              type: 'error',
              duration: 1200
            });
          }
        }
      );
    }
  });
}

function logout() {
  proxy.$http("/mis/user/logout", "GET", null, true, (resp) => {
    localStorage.removeItem("token");
    localStorage.removeItem("permissions");
    router.push({
      name: "MisLogin",
    });
  });
}

window.onresize = () => {
  siteContent.documentClientHeight = document.documentElement.clientHeight;
  loadSiteContentViewHeight();
};
</script>

<style scoped lang="scss">
@import url("../../assets/scss/index.scss");
@import url(main.less);

</style>
